<template>
	<view class="contain">
		<view class="payMessage">
			<view>
				<view class="payMessage-list-top">
					<view style="height: 100%; width: 170px;">
						<text class="payMessage-list-top-text1">大棚蔬菜基地</text>
						<text class="payMessage-list-top-text2">1-25(1平方米)</text>
					</view>
					<image src="../../static/ce.png"></image>
				</view>
			</view>
			<view class="line"></view>
			<view>
				<view class="payMessage-list-mid">
					<view style="height: 100%; width: 170px;">
						<text class="payMessage-list-mid-text1">服务类型</text>
						<text class="payMessage-list-mid-text2">全托管</text>
					</view>
				</view>
			</view>
			<view class="line2"></view>
			<view>
				<view class="payMessage-list-mid">
					<view style="height: 100%; width: 170px;">
						<text class="payMessage-list-mid-text1">租聘信息</text>
						<text class="payMessage-list-mid-text2">一年时间(365天)</text>
					</view>
				</view>
			</view>
		</view>
		<view class="seedManage">
			<view class="seedManage-top">
				<text class="manage-text">种子管理</text>
				<!-- <text style="margin-left: auto; line-height: 30px; font-size: 12px;">切换种子></text> -->
			</view>
			<view class="line"></view>
			<view style="width: 200px; margin: auto; margin-top: 20px;">
				<up-button type="success" text="添加种子" :plain="true" shape="circle" @click="ToSeedSelect()"></up-button>
			</view>
		</view>
		<view class="userMessage">
			<view class="userMessage-top">
				<text>用户信息</text>
			</view>
			<view class="line"></view>
			<view class="userMessage-userName">
				<view class="userMessage-userName-text">
					<text>姓名</text>
				</view>
				<view class="userMessage-userName-input">
					<input type="text" placeholder="请输入租凭人的姓名" />
				</view>
			</view>
			<view class="line"></view>
			<view class="userMessage-userName">
				<view class="userMessage-userName-text">
					<text>我的地址</text>
				</view>
				<view class="userMessage-userName-input">
					<input type="text" placeholder="地址" />
				</view>
			</view>
			<view class="line"></view>
			<view class="userMessage-userName">
				<view class="userMessage-userName-text">
					<text>电话</text>
				</view>
				<view class="userMessage-userName-input">
					<input type="text" placeholder="电话号码" />
				</view>
			</view>
			<view class="line"></view>
			<view class="userMessage-userName">
				<view class="userMessage-userName-text">
					<text>备注</text>
				</view>
				<view class="userMessage-userName-input">
					<input type="text" placeholder="备注请写在这里哦" />
				</view>
			</view>
		</view>
		<view class="coupons">
			<view class="coupons-top">
				<text>优惠</text>
			</view>
			<view class="line"></view>
			<view class="coupons-selecct">
				<view>
					<image src="../../static/fa.png"
						style="width: 20px;height: 20px; margin-top: 10px; margin-right: 5px;"></image>
				</view>
				<text style="font-weight: bold;">优惠卷</text>
				<view style="margin-left: auto;font-size: 12px;">
					<text>暂时无可用的优惠卷</text>
				</view>
			</view>
		</view>
		<view class="fixed-bottom-bar">
			<view style="margin-left: 10px;display: flex;
		align-items: center;">
				<text style="font-size: 18px;">总计:</text>
				<text style="margin-left: 5px; margin-top: 4px; color: red;">$1460.00</text>
			</view>
			<view style="margin-left:auto">
				<up-button color="rgb(89,225,134)" text="立即支付" style="height: 20px; width: 80px;" >
				</up-button>
			</view> 
		</view>
	</view>
</template>

<script setup>
//跳转种子选择页面
const ToSeedSelect=()=>{
	uni.navigateTo({
		url:'/pages/land/SeedDetail'
	})
}
</script>

<style scoped>
	.contain {
		background-color: rgb(241, 241, 241);
		padding-top: 10px;
		height: 100vh;
	}

	.payMessage {
		width: 95%;
		margin: auto;
		border-radius: 5px;
		background-color: white;

	}

	.payMessage-list-top {
		height: 50px;
		width: 100%;
		display: flex;
	}

	.payMessage-list-top-text1 {
		color: rgb(30, 152, 79);
		display: block;
		margin-left: 5px;
		margin-top: 4px;
	}

	.payMessage-list-top-text2 {
		color: rgb(30, 152, 79);
		display: block;
		margin: 5px;
		font-size: 13px;
	}

	.payMessage-list-top image {
		width: 30px;
		height: 30px;
		margin-left: auto;
		margin-top: 10px;
		margin-right: 12px;
	}

	.payMessage-list-mid {
		height: 50px;
		width: 100%;
		display: flex;
		margin-top: 10px;
	}

	.payMessage-list-mid-text2 {
		display: block;
		margin-left: 5px;
		margin-top: 5px;
	}

	.payMessage-list-buttom-text1 {
		height: 50px;
		width: 100%;
		display: flex;
		margin-top: 10px;
	}

	.line {
		height: 0.5px;
		width: 98%;
		background-color: #cccccc;
		margin: auto;
		margin-top: 5px;
	}

	.line2 {
		height: 1px;
		width: 98%;
		background-color: #cccccc;
		margin: auto;
		margin-top: 5px;
	}

	.payMessage-list-mid-text1 {
		display: block;
		margin-left: 5px;
		font-size: 12px;
	}

	.payMessage-list-buttom-text2 {
		display: block;
		margin-left: 5px;
		font-size: 12px;
	}

	.seedManage {
		width: 95%;
		height: 120px;
		margin: auto;
		margin-top: 15px;
		background-color: white;
		border-radius: 5px;
	}

	.seedManage-top {
		width: 100%;
		height: 30px;
		display: flex;
	}

	.sendManage {
		width: 95%;
		height: 120px;
		margin: auto;
		margin-top: 15px;
		background-color: white;
		border-radius: 5px;
	}

	.sendManage-top {
		width: 100%;
		height: 30px;
	}

	.manage-text {
		line-height: 30px;
		margin-left: 5px;
		color: rgb(20, 182, 44);
		font-weight: bold;
	}

	.userMessage {
		width: 95%;
		margin: auto;
		margin-top: 20px;
		background-color: white;
		padding-bottom: 5px;
	}

	.userMessage-top {
		height: 30px;
		line-height: 30px;
		margin-left: 5px;
		color: rgb(20, 182, 44);
		font-weight: bold;
	}

	.userMessage-userName {
		width: 100%;
		height: 50px;
	}

	.userMessage-userName-text {
		font-size: 13px;
		margin-left: 5px;
		display: block;
		color: rgb(155, 155, 155);
	}

	.userMessage-userName-input {
		height: 32px;
		width: 98%;
		margin-left: 5px;
	}

	.userMessage-userName-input input {
		height: 100%;
		width: 100%;
	}

	.coupons {
		width: 95%;
		background-color: white;
		border-radius: 3px;
		margin: auto;
		margin-top: 15px;
	}

	.coupons-top {
		height: 30px;
		width: 100%;
	}

	.coupons-top text {
		line-height: 35px;
		margin-left: 5px;
		font-weight: bold;
		color: rgb(20, 182, 44);
	}

	.coupons-selecct {
		line-height: 40px;
		padding-left: 5px;
		margin-top: 4px;
		display: flex;
	}

	.fixed-bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		padding: 10px 0;
		z-index: 1000;
		/* 确保在顶部 */
	}
</style>